<!DOCTYPE html>
<html>

<head>
  <script src="index.js"></script>
</head>
<style>
  body {
    color: white;
    padding: 0 16px;
  }

  li:before {
    content: '• ';
    width: 3em;
  }

  #layers {
    border: 1px solid #808080;
    border-radius: 4px;
    padding: 16px;
    overflow: scroll;
    height: 160px;
  }

  footer {
    display: flex;
    justify-content: space-around;
  }
</style>

<body>
  <sp-heading id="layer-title">Layers</sp-heading>
  <sp-body id="layers">
    No layers
  </sp-body>
  <footer>
    <sp-button id="btnAlert">Show Alert</sp-button>
    <sp-button id="btnPopulate">Populate Layers</sp-button>
    <sp-button id="btnCLear">Clear Layer List</sp-button>
  </footer>
</body>

</html>